<template>
  <div>
    <div>
      <van-row >
        <van-col span="8" style="line-height: 50px;"><van-icon name="manager-o" /></van-col>
        <!--搜索框-->
        <van-col span="8"><van-search v-model="value" placeholder="搜索" /></van-col>
        <van-col span="8" style="line-height: 50px;">搜索</van-col>
      </van-row>

    </div>
        <van-button type="primary"  style="float: left" @click="go">编辑文章</van-button>



    <!--轮播图-->
    <van-swipe :autoplay="2000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" width="100%" height="250" />
      </van-swipe-item>
    </van-swipe>

    <!--通知栏-->
    <van-notice-bar
      left-icon="volume-o"
      scrollable
      text="关于2022年深化纠正'四风'和作风纪律专项活动。"
    />
    <van-tabbar v-model="active" @change="onChange" route>
      <van-tabbar-item icon="home-o" name="基层党建" replace to="/a1">基层党建</van-tabbar-item>

      <van-tabbar-item icon="search" name="教育培训" replace to="/education">教育培训</van-tabbar-item>

      <van-tabbar-item icon="friends-o" name="首页" replace to="/">首页</van-tabbar-item>

      <van-tabbar-item icon="setting-o" name="意识形态" replace to="/a4">意识形态</van-tabbar-item>

      <van-tabbar-item icon="search" name="群团天地" replace to="/a5">群团天地</van-tabbar-item>
    </van-tabbar>


    <!--中心组学习-->
    <van-tabs  @click="onClick" >
      <van-tab title="中心组学习">
        <van-tabs >
<!--@click="uonClick"-->

          <van-tab title="学习内容"  >
            <div v-for="item in list" @click="findStudyGruopById(item.studyId,item.studyClassify)">
             <img :src=" item.studyImage" style="width: 20px" height="20px" >
              <span style="line-height: 30px" >{{item.studyTitle}}</span>
              {{item.studyDate}}<br>   &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;     &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;发布用户:{{item.user.userName}}<br>
            </div>

          </van-tab>


          <!--讨论内容-->
          <van-tab title="讨论内容">
            <div v-for="item in list2" @click="findStudyGruopById2(item.studyId,item.studyClassify)">
              <img :src="item.studyImage"style="width: 20px" height="20px" />
              <span style="line-height: 30px">{{item.studyTitle}}</span>
              {{item.studyDate}}<br>   &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;     &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;发布用户:{{item.user.userName}}
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>

      <van-tab title="考评通报">
        <div v-for="item in list3" @click="findStudyGruopById3(item.id)">
          <img :src="item.articlePic "style="width: 20px" height="20px" />
          <span style="line-height: 30px">{{item.articleTitle}}</span>
          &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;  &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;     &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;发布用户:{{item.articleWriter}}
        </div>
      </van-tab>

      <!--举报箱内容-->
      <van-tab title="举报箱" >
        <div>

        </div>
        <van-form @submit="onSubmit">
        <van-field
          v-model="rbTitle"
          type="username"
          name="label-width"
          label="标题"
          placeholder="请输入标题"
          :rules="[{ required: true, message: '请填写标题' }]"
        />
        <van-field
          v-model="rbContext"
          type="username"
          name="rbContext"
          label="内容"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请填写内容' }]"
        />
        <div style="margin: 0;" >
          <van-button round block type="info" style="width: 100px" size="small" native-type="submit">提交</van-button>
        </div>
      </van-form></van-tab>
    </van-tabs>


  </div>
</template>

<script>
import {Notify} from "vant";
import axios from "axios";

export default {
  name: "home.vue",
  data(){
    return{
      list: [],
      loading: false,
      finished: false,
      list2:[],
      list3:[
      ],
      articleTitle:'',
      rbTitle:'',
      rbContext:'',
      article:{},
      active:'',
      value :"",
      images: [
        'http://rhs5roj8q.hb-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202022-09-23%20163919.png',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
      ],

    }
  },

  methods:{

    // ============================通过id展示对应的信息详情===================
    findStudyGruopById:function (studyId,studyClassify) {
      this.$router.push({ name: "studygroup", params: { id: studyId,stu: studyClassify }});
    },

    findStudyGruopById2:function (studyId,studyClassify) {
      this.$router.push({ name: "studygroup", params: {id: studyId,stu: studyClassify}});
    },
    findStudyGruopById3:function (id) {
      this.$router.push({ name: "articleinfo", params: {id: id}});
    },
    goo:function () {
      this.$router.replace("/article")
    },
    uonClick(name, title) {
      Toast(title);
    },
    go:function () {
      this.$router.replace("/articleadd")
    },
    onChange(name) {
      Notify({ type: 'primary', message: name });
    },


    //============================举报箱模块内容==============================
    onSubmit(values) {
      console.log('submit', values);
      axios.post("http://localhost:7000/Dj/insert/"+this.rbTitle+"/"+this.rbContext).then(res=>{

        if(res.data.code==1){
          // 成功通知
          Notify({ type: 'success', message: '信息提交成功,请勿重复提交' })


        }else{
          Notify({ type: 'danger', message: '信息提交失败,请规范填写' });
        }
      })
    },
    //============================查出学习内容模块内容============================
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        axios.post("http://localhost:7000/Dj/findAllDj").then(res => {
          this.list = res.data.data;
          console.log(this.list)
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          this.finished = true;
        });
      }, 1000);
    },


   //============================查出讨论学习模块内容============================
    onLoad2() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        axios.post("http://localhost:7000/Dj/findAllDjT").then(res => {
          this.list2 = res.data.data;
          console.log(this.list)
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          this.finished = true;
        });
      }, 1000);
    },
    onLoad3() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        axios.post("http://localhost:7000/article/findAll").then(res => {
          this.list3 = res.data.data;
          console.log(this.list)
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          this.finished = true;
        });
      }, 1000);
    },
  },
  mounted() {
    this.onLoad();
    this.onLoad2();
    this.onLoad3()
    // this.findStudyGruopById();
  }
}
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
